<template>
  <el-dialog v-model="showDialog" title="重新提货" width="600px" :close-on-click-modal="false" @opened="handleOpened"
    @closed="handleClosed">
    <el-form ref="formRef" :model="form" :rules="formRule" label-width="110px">
      <el-form-item label="充值账号" prop="userAccount">
        <el-input v-model="form.userAccount" placeholder="请输入新的充值账号" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Ref } from "vue";
import { FormInstance, FormRules } from 'element-plus'
import { retryPickUp } from "@/api/order";
import { phone_simple } from "@/utils/commonRegexp";
import { IOrderPageRow } from "@/api/modules/order";

const props = defineProps<{
  show: boolean,
  rowData: IOrderPageRow
}>()

const emits = defineEmits(['update:show', 'refresh'])
const route = useRoute();

const formRef: Ref<FormInstance | undefined> = ref()
const formRule: FormRules = {
  userAccount: [
    {
      required: true,
      message: '充值账号是必填项',
      trigger: 'blur',
    },
    {
      trigger: 'blur',
      validator(rule: any, value: any, callback: any) {
        // if (!phone_simple.test(form.userAccount + '')) {
        //   callback('手机号格式不正确')
        //   return
        // }

        callback()
      }
    }
  ],
}
const form = reactive({
  id: '',
  userAccount: '',
})

const showDialog = computed({
  get() {
    return props.show
  },
  set() {
    emits('update:show', false)
  }
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const rs = await retryPickUp(form)
      if (rs.code === 200) {
        refresh()
        showDialog.value = false
      }
    }
  })
}

const refresh = () => {
  emits('refresh')
}

const handleOpened = () => {
  if (props.rowData) {
    Object.keys(form).forEach(key => {
      form[key] = props.rowData[key]
    })
    //填充默认账号
    form.userAccount = props.rowData.ext?.rechargeAccount ?? ''
  }
}

const handleClosed = () => {
  formRef.value?.resetFields()
}


</script>

<style scoped lang="scss"></style>
